<template>
  <div>
    <!-- 申请信息 -->
    <div class="padding20 whiteBg br-8">
      <div class="form_title">申请信息</div>
      <el-row class="form_row">
        <el-col :span="8">
          <div class="form_item">
            <span class="form_label">编号：</span>
            <span class="form_value">{{ formData.code || '--' }}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="form_item">
            <span class="form_label">登记人：</span>
            <span class="form_value">{{ currentUser || '--' }}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="form_item">
            <span class="form_label">申请日期：</span>
            <span class="form_value">{{ currentDate }}</span>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 基本信息 -->
    <div class="m-t-16 whiteBg padding20 br-8">
      <div class="form_title">基本信息</div>
      <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        label-width="120px"
        class="form_container"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="属性类别" prop="categoryCode">
              <el-select
                v-model="formData.categoryCode"
                filterable
                placeholder="请选择"
                style="width: 100%"
                :disabled="isCategorySelectDisabled"
              >
                <el-option
                  v-for="item in categoryList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                  :disabled="shouldDisableCategoryOption(item)"
                >
                  <span class="select-option-code">{{ item.code }}</span>
                  <span class="select-option-name">{{ item.name }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="控制类别" prop="applicableLevel">
              <el-select
                v-model="formData.applicableLevel"
                multiple
                collapse-tags
                collapse-tags-tooltip
                filterable
                placeholder="请选择"
                style="width: 100%"
                :disabled="isViewMode"
              >
                <el-option
                  v-for="item in applicableLevelList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="属性名称" prop="name">
              <el-input
                v-model="formData.name"
                placeholder="请输入"
                maxlength="20"
                :disabled="isViewMode"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="属性说明" prop="description">
              <el-input
                v-model="formData.description"
                type="textarea"
                placeholder="请输入"
                :rows="3"
                maxlength="200"
                :disabled="isViewMode"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <!-- 属性值 -->
    <div class="m-t-16 whiteBg padding20 br-8">
      <div class="form_title">属性值</div>
      <div
        class="table_operation"
        style="margin-bottom: 16px"
        v-if="!isViewMode"
      >
        <el-button type="primary" @click="handleAddAttributeValue"
          >新增</el-button
        >
      </div>

      <div ref="attributeTableWrapperRef" class="attribute-table-wrapper">
        <el-table-v2
          class="list_table"
          :columns="attributeColumns"
          :data="attributeValues"
          :width="attributeTableWidth"
          :height="500"
          :header-height="38"
          :row-height="60"
          row-key="rowKey"
        />
      </div>
    </div>

    <!-- 底部提交按钮 -->
    <div class="m-t-24 align-right">
      <el-button @click="handleCancel">
        {{ isViewMode ? '返回' : '取消' }}
      </el-button>
      <el-button
        v-if="!isViewMode"
        type="primary"
        @click="handleSubmit"
        :loading="submitLoading"
        >提交</el-button
      >
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onBeforeUnmount, computed, h } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage, ElMessageBox, ElButton, ElInput, ElTooltip } from 'element-plus';
import { userInfoStore,pageTabsStore } from '@/store/index';
import {
  getPropertyDetail,
  getSpecificationTypeOptions,
  updatePropertyValueStatus,
  deletePropertyValue,
  createProperty,
  updateProperty,
} from '@/api/attributeManagement';

const handelPageTab = pageTabsStore();
const router = useRouter();
const route = useRoute();
const userStore = userInfoStore();

// 申请日期：新增/编辑使用当前日期，详情使用接口返回的 updateTime（仅显示年月日）
const detailUpdateTime = ref('');

const currentDate = computed(() => {
  if (isViewMode.value && detailUpdateTime.value) {
    // 后端返回格式类似：2025-11-24 09:41:18，只取前 10 位日期
    return String(detailUpdateTime.value).slice(0, 10);
  }
  const now = new Date();
  return now.toISOString().split('T')[0];
});

// 获取当前用户名（从登录信息获取，这里默认值）
const currentUser = ref('');

// 初始化表单数据
const formData = reactive({
  id: '',
  code: '',
  name: '',
  categoryCode: '',
  applicableLevel: [],
  description: '',
});

// 表单验证规则
const rules = {
  categoryCode: [
    { required: true, message: '属性类别不能为空', trigger: 'change' },
  ],
  applicableLevel: [
    { required: true, message: '控制类别不能为空', trigger: 'change' },
  ],
  name: [
    { required: true, message: '属性名称不能为空', trigger: 'blur' },
    { max: 20, message: '属性名称长度不能超过20个字符', trigger: 'blur' },
  ],
  description: [
    { required: true, message: '属性说明不能为空', trigger: 'blur' },
    { max: 200, message: '属性说明长度不能超过200个字符', trigger: 'blur' },
  ],
};

// 属性值列表
const attributeValues = ref([]);

// el-table-v2 表格宽度相关
const attributeTableWrapperRef = ref(null);
const MIN_ATTRIBUTE_TABLE_WIDTH = 1000;
const attributeTableWidth = ref(MIN_ATTRIBUTE_TABLE_WIDTH);

const updateAttributeTableWidth = () => {
  const el = attributeTableWrapperRef.value;
  if (!el) return;
  const containerWidth = el.clientWidth || 0;
  const nextWidth = Math.max(containerWidth, MIN_ATTRIBUTE_TABLE_WIDTH);
  if (nextWidth !== attributeTableWidth.value) {
    attributeTableWidth.value = nextWidth;
  }
};

// el-table-v2 列定义（虚拟滚动）
const attributeColumns = [
  {
    key: 'index',
    dataKey: 'rowKey',
    title: '序号',
    width: 80,
    align: 'center',
    cellRenderer: ({ rowIndex }) => h('span', rowIndex + 1),
  },
  {
    key: 'code',
    dataKey: 'attributeValueCode',
    title: '属性值编号',
    width: 150,
    cellRenderer: ({ rowData }) =>
      h('span', rowData.attributeValueCode || '--'),
  },
  {
    key: 'valueName',
    dataKey: 'valueName',
    title: '属性值名称',
    width: 310,
    cellRenderer: ({ rowData, rowIndex }) => {
      if (!rowData.isEditing) {
        return h('span', rowData.valueName || '--');
      }
      return h(ElInput, {
        modelValue: rowData.valueName,
        size: 'small',
        maxlength: 20,
        placeholder: '请输入',
        'onUpdate:modelValue': (val) => {
          rowData.valueName = val;
          handleAttributeValueNameInput(rowIndex);
        },
      });
    },
  },
  {
    key: 'status',
    dataKey: 'status',
    title: '状态',
    width: 100,
    align: 'center',
    cellRenderer: ({ rowData }) => {
      let text = '--';
      if (rowData.status === 1) text = '已生效';
      else if (rowData.status === 0) text = '已停用';
      return h('span', text);
    },
  },
  {
    key: 'desc',
    dataKey: 'desc',
    title: '说明',
    width: 200,
    cellRenderer: ({ rowData }) => {
      const text = rowData.desc || '--';
      if (!rowData.isEditing) {
        return h(
          ElTooltip,
          {
            content: text,
            placement: 'top',
          },
          {
            default: () =>
              h(
                'span',
                {
                  class: 'cell-ellipsis',
                  title: text,
                },
                text,
              ),
          },
        );
      }
      return h(ElInput, {
        modelValue: rowData.desc,
        size: 'small',
        maxlength: 200,
        placeholder: '请输入',
        'onUpdate:modelValue': (val) => {
          rowData.desc = val;
        },
      });
    },
  },
  {
    key: 'actions',
    title: '操作',
    width: 250,
    align: 'center',
    fixed: 'right',
    cellRenderer: ({ rowData, rowIndex }) => {
      if (isViewMode.value) return null;
      const buttons = [];

      // 编辑状态：只显示当前行的保存按钮（以及新增行的删除按钮）
      if (rowData.isEditing) {
        buttons.push(
          h(
            ElButton,
            {
              link: true,
              type: 'primary',
              onClick: () => handleSaveSingleAttributeValue(rowIndex),
            },
            () => '保存',
          ),
        );

        if (rowData.isNewRow) {
          buttons.push(
            h(
              ElButton,
              {
                link: true,
                type: 'primary',
                onClick: () => handleDeleteAttributeValue(rowIndex),
              },
              () => '删除',
            ),
          );
        }

        return h('div', buttons);
      }

      if (!rowData.isEditing && rowData.status === 1) {
        buttons.push(
          h(
            ElButton,
            {
              link: true,
              type: 'primary',
              onClick: () => handleEditAttributeValue(rowIndex),
            },
            () => '编辑',
          ),
          h(
            ElButton,
            {
              link: true,
              type: 'primary',
              onClick: () => handleDisableAttributeValue(rowIndex),
            },
            () => '停用',
          ),
        );
      }
      if (!rowData.isEditing && rowData.status === 0) {
        buttons.push(
          h(
            ElButton,
            {
              link: true,
              type: 'primary',
              onClick: () => handleEnableAttributeValue(rowIndex),
            },
            () => '启用',
          ),
        );
      }
      if (rowData.isNewRow) {
        buttons.push(
          h(
            ElButton,
            {
              link: true,
              type: 'primary',
              onClick: () => handleDeleteAttributeValue(rowIndex),
            },
            () => '删除',
          ),
        );
      }
      if (!buttons.length) return null;
      return h('div', buttons);
    },
  },
];

// 下拉列表
const categoryList = ref([]);
const applicableLevelList = ref([]);

// 原始属性类别（用于编辑时限制基础属性切换规则）
const originalCategoryCode = ref('');

// 状态
const formRef = ref(null);
const submitLoading = ref(false);

/**
 * 模式：新增/编辑/查看
 */
const mode = computed(() => {
  if (route.name === 'attributeManagementDetail' || route.query.mode === 'view') {
    return 'view';
  }
  if (route.name === 'attributeManagementEdit') return 'edit';
  return route.query.propertyCode ? 'edit' : 'add';
});
const isEdit = computed(() => mode.value === 'edit' || mode.value === 'view');
const isViewMode = computed(() => mode.value === 'view');

// =================== 属性类别切换限制逻辑 ===================
// 基础属性类别判断：根据 SPECIFICATION_TYPE 接口返回的 code === 'P104'
// 后端约定：code = 'P104' 表示「基础属性」，其他 code 都视为非基础属性
const isBasicCategory = (category) => {
  if (!category) return false;
  return category.code === 'P104';
};

const isBasicOriginalCategory = computed(() => {
  if (!originalCategoryCode.value) return false;
  const origin = categoryList.value.find(
    (item) => item.code === originalCategoryCode.value,
  );
  return isBasicCategory(origin);
});

// 编辑模式下：
// - 如果原始类别是基础属性，则整个下拉不可编辑
// - 详情模式本身就禁用
const isCategorySelectDisabled = computed(() => {
  if (isViewMode.value) return true;
  if (!isEdit.value) return false;
  return isBasicOriginalCategory.value;
});

// 非基础属性编辑时：不允许切到“基础属性”类别
const shouldDisableCategoryOption = (item) => {
  if (!isEdit.value) return false;
  if (!item) return false;
  // 原来就是基础属性的情况上面已经整体禁用，不需要单独禁用选项
  if (isBasicOriginalCategory.value) return false;
  return isBasicCategory(item);
};

/**
 * 获取详情数据（编辑模式）
 */
const getDetailData = async () => {
  try {
    const propertyCode = route.query.propertyCode;
    if (!propertyCode) return;

    // 调用API获取详情数据
    const res = await getPropertyDetail(propertyCode, true);

    const detailData = res.data || {};

    // 详情模式下，申请日期展示为后端返回的更新时间（仅年月日）
    detailUpdateTime.value = detailData.updateTime || '';

    // 映射并填充表单数据
    originalCategoryCode.value = detailData.propertyType || '';
    Object.assign(formData, {
      id: detailData.propertyCode,
      code: detailData.propertyCode,
      name: detailData.propertyName,
      categoryCode: detailData.propertyType,
      applicableLevel: detailData.controlCategoryType ? detailData.controlCategoryType.split(',') : [],
      description: detailData.desc,
    });

    // 映射属性值数据
    attributeValues.value = (detailData.propertyValues || []).map((item, index) => ({
      rowKey: item.valueCode || `row_${index}`,
      attributeValueCode: item.valueCode,
      valueName: item.valueName,
      status: item.status,
      desc: item.desc,
      isEditing: false,
      isNewRow: false,
    }));
  } catch (error) {
    console.error('获取详情失败:', error);
    ElMessage.error('获取详情失败');
  }
};

/**
 * 获取类别列表
 */
const getCategoryList = async () => {
  try {
    // 调用 API 获取属性类型列表
    const res = await getSpecificationTypeOptions({}, true);

    // 映射接口返回的数据
    const mappedData = (res.data || []).map((item) => ({
      code: item.code,
      name: item.description,
      extendedField1: item.extendedField1,
    }));

    categoryList.value = mappedData;
  } catch (error) {
    console.error('获取类别列表失败:', error);
  }
};

/**
 * 获取控制类别列表
 */
const getApplicableLevelList = async () => {
  try {
    // 控制类别写死数据：1=大类，2=中类，3=品类，4=商品
    applicableLevelList.value = [
      { code: '1', name: '大类' },
      { code: '2', name: '中类' },
      { code: '3', name: '品类' },
      { code: '4', name: '商品' },
    ];
  } catch (error) {
    console.error('获取控制类别列表失败:', error);
  }
};

/**
 * 获取当前用户
 */
const getCurrentUserName = async () => {
  try {
    // 从 store 获取用户信息
    const userInfo = userStore.userInfo;
    if (userInfo && userInfo.firstName) {
      currentUser.value = userInfo.firstName;
    } else {
      currentUser.value = '系统用户';
    }
  } catch (error) {
    console.error('获取用户信息失败:', error);
    currentUser.value = '系统用户';
  }
};

/**
 * 表头样式处理
 */
const handleHeaderCellClass = () => {
  return 'header-cell';
};

/**
 * 属性值名称输入处理
 */
const handleAttributeValueNameInput = (index) => {
  const row = attributeValues.value[index];
  if (row.valueName && row.valueName.length > 20) {
    ElMessage.warning('属性值名称超长，请重新输入。');
    row.valueName = row.valueName.substring(0, 20);
  }
};

/**
 * 新增属性值行
 */
const handleAddAttributeValue = () => {
  if (isViewMode.value) return;
  attributeValues.value.push({
    rowKey: `new_${Date.now()}_${Math.random().toString(16).slice(2)}`,
    id: '',
    valueName: '',
    status: 1,
    desc: '',
    isEditing: true,
    isNewRow: true,
  });
};

/**
 * 编辑属性值
 */
const handleEditAttributeValue = (index) => {
  if (isViewMode.value) return;
  const row = attributeValues.value[index];
  row.isEditing = true;
};

/**
 * 停用属性值
 */
const handleDisableAttributeValue = async (index) => {
  if (isViewMode.value) return;
  const row = attributeValues.value[index];

  // 如果是新增的行（还没有valueCode），直接修改状态
  if (!row.attributeValueCode) {
    ElMessageBox.confirm('请确认是否停用?', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    })
      .then(() => {
        row.status = 0;
        ElMessage.success('停用成功');
      })
      .catch(() => {
        // 取消操作
      });
    return;
  }

  // 已保存的属性值，调用接口
  try {
    await ElMessageBox.confirm('请确认是否停用?', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    });

    // 调用停用接口
    await updatePropertyValueStatus(
      {
        propertyValueCode: row.attributeValueCode,
        status: 0, // 0表示停用
      },
      true
    );

    row.status = 0;
    ElMessage.success('停用成功');
  } catch (error) {
    if (error !== 'cancel') {
      console.error('停用失败:', error);
      ElMessage.error('停用失败');
    }
  }
};

/**
 * 启用属性值
 */
const handleEnableAttributeValue = async (index) => {
  if (isViewMode.value) return;
  const row = attributeValues.value[index];

  // 如果是新增的行（还没有valueCode），直接修改状态
  if (!row.attributeValueCode) {
    row.status = 1;
    ElMessage.success('启用成功');
    return;
  }

  // 已保存的属性值，调用接口
  try {
    // 调用启用接口
    await updatePropertyValueStatus(
      {
        propertyValueCode: row.attributeValueCode,
        status: 1, // 1表示启用
      },
      true
    );

    row.status = 1;
    ElMessage.success('启用成功');
  } catch (error) {
    console.error('启用失败:', error);
    ElMessage.error('启用失败');
  }
};

/**
 * 删除属性值
 */
const handleDeleteAttributeValue = async (index) => {
  if (isViewMode.value) return;
  const row = attributeValues.value[index];

  // 如果是新增的行（还没有valueCode），直接从列表中删除
  if (!row.attributeValueCode) {
    try {
      await ElMessageBox.confirm('确认删除该属性值吗？', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      });

      attributeValues.value.splice(index, 1);
      ElMessage.success('删除成功');
    } catch (error) {
      // 用户取消操作
    }
    return;
  }

  // 已保存的属性值，调用删除接口
  try {
    await ElMessageBox.confirm('确认删除该属性值吗？', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    });

    // 调用删除接口
    await deletePropertyValue(row.attributeValueCode, true);

    // 删除成功后从列表中移除
    attributeValues.value.splice(index, 1);
    ElMessage.success('删除成功');
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除失败:', error);
      ElMessage.error('删除失败');
    }
  }
};

/**
 * 单行保存属性值（仅提交当前行的数据）
 */
const handleSaveSingleAttributeValue = async (index) => {
  if (isViewMode.value) return;
  if (!isEdit.value) {
    ElMessage.warning('请在属性编辑页面使用单行保存功能');
    return;
  }
  if (!formRef.value) return;

  const row = attributeValues.value[index];
  if (!row) return;

  // 校验基本信息（表单必填项）
  const valid = await formRef.value.validate().catch(() => false);
  if (!valid) {
    ElMessage.error('请先完成基本信息必填项');
    return;
  }

  // 仅校验当前这一行的属性值规则
  if (!row.valueName || row.valueName.trim() === '') {
    ElMessage.error('属性值不能为空。');
    return;
  }
  if (row.valueName.length > 20) {
    ElMessage.error('属性值名称长度不能超过20个字符');
    return;
  }

  const submitData = {
    itemPropertyOperDto: {
      propertyCode: formData.code,
      propertyName: formData.name,
      propertyType: formData.categoryCode,
      controlCategoryType: formData.applicableLevel.join(','),
      description: formData.description,
    },
    itemPropertyValueOperDtoList: [
      (() => {
        const valueItem = {
          valueName: row.valueName,
          description: row.desc,
        };
        if (row.attributeValueCode) {
          valueItem.valueCode = row.attributeValueCode;
        }
        return valueItem;
      })(),
    ],
  };

  try {
    await updateProperty(submitData, true);
    ElMessage.success('保存成功');
    row.isEditing = false;
    // 重新拉取详情，确保本行数据（特别是编号）与后端保持一致
    await getDetailData();
  } catch (error) {
    console.error('单行保存失败:', error);
    ElMessage.error('保存失败');
  }
};

/**
 * 提交表单
 */
const handleSubmit = async () => {
  if (isViewMode.value) return;
  if (!formRef.value) return;

  const valid = await formRef.value.validate().catch(() => false);
  if (!valid) {
    ElMessage.error('请完成必填项');
    return;
  }

  // 验证属性值是否完整（如果有属性值，则要求名称必填且长度合法）
  // 如果一行属性值都不添加（attributeValues 为空），则不做以下校验，允许直接提交
  for (let i = 0; i < attributeValues.value.length; i++) {
    const row = attributeValues.value[i];
    // 属性值名称不能为空
    if (!row.valueName || row.valueName.trim() === '') {
      ElMessage.error('属性值不能为空。');
      return;
    }
    // 属性值名称长度不能超过20
    if (row.valueName.length > 20) {
      ElMessage.error(`第${i + 1}行属性值名称超长，请重新输入。`);
      return;
    }
  }

  submitLoading.value = true;
  try {
    // 新增模式：使用新接口
    if (!isEdit.value) {
      const submitData = {
        itemPropertyCreateDto: {
          propertyName: formData.name,
          propertyType: formData.categoryCode,
          controlCategoryType: formData.applicableLevel.join(','), // 多选转字符串
          description: formData.description,
        },
        itemPropertyValueCreateDtoList: attributeValues.value.map((item) => ({
          valueName: item.valueName,
          description: item.desc,
        })),
      };

      await createProperty(submitData, true);
      ElMessage.success('新增成功');
    } else {
      // 编辑模式：调用编辑接口
      const submitData = {
        itemPropertyOperDto: {
          propertyCode: formData.code,
          propertyName: formData.name,
          propertyType: formData.categoryCode,
          controlCategoryType: formData.applicableLevel.join(','),
          description: formData.description,
        },
        itemPropertyValueOperDtoList: attributeValues.value.map((item) => {
          const valueItem = {
            valueName: item.valueName,
            description: item.desc,
          };
          // 如果有 valueCode，则添加到对象中
          if (item.attributeValueCode) {
            valueItem.valueCode = item.attributeValueCode;
          }
          return valueItem;
        }),
      };

      await updateProperty(submitData, true);
      ElMessage.success('修改成功');
    }
  // 删除 store 中对应的路由标签
    handelPageTab.deleteTab(route.name);
    // 返回列表页
    router.push({
      path: '/hpurchase/goodsManagement/attributeManagement',
    });
  } catch (error) {
    console.error('提交失败:', error);
    ElMessage.error('提交失败');
  } finally {
    submitLoading.value = false;
  }
};

/**
 * 取消
 */
const handleCancel = () => {
     // 删除 store 中对应的路由标签
  handelPageTab.deleteTab(route.name);

  router.back();
};

/**
 * 初始化
 */
const init = async () => {
  await Promise.all([
    getCategoryList(),
    getApplicableLevelList(),
    getCurrentUserName(),
  ]);

  // 如果是编辑模式，获取详情数据
  if (isEdit.value) {
    await getDetailData();
  } else {
    // 新增模式，生成编号（编号可由后端自动生成）
    formData.code = '--';
  }
};

onMounted(() => {
  init();
  // 初始化表格宽度，并监听窗口尺寸变化
  updateAttributeTableWidth();
  window.addEventListener('resize', updateAttributeTableWidth);
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', updateAttributeTableWidth);
});
</script>

<style lang="less" scoped>
.form_title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5e5e5;
}

.form_row {
  margin-bottom: 16px;
}

.form_item {
  display: flex;
  align-items: center;
  height: 32px;
}

.form_label {
  display: inline-block;
  width: 80px;
  text-align: right;
  margin-right: 10px;
  color: #606266;
  font-size: 14px;
}

.form_value {
  color: #303133;
  font-size: 14px;
}

.select-option-code {
  display: inline-block;
  width: 90px;
  color: #606266;
}

.select-option-name {
  display: inline-block;
  width: calc(100% - 90px);
  color: #303133;
  text-align: right;
}

.form_container {
  margin-top: 16px;
}

.table-scroll {
  max-height: 500px;
  overflow-y: auto;
}

.attribute-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

/deep/ .el-table-v2__row {
  align-items: flex-start;
}

/deep/ .el-table-v2__row-cell {
  white-space: normal;
  text-overflow: unset;
}

.cell-ellipsis {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.align-right {
  text-align: right;
  margin-top: 24px;
}
/deep/ .el-table-v2__header-wrapper,
/deep/ .el-table-v2__header-row {
  background-color: #e5e5e5 !important;
  height: 38px !important;
}

/deep/ .el-table-v2__header-cell {
  background-color: #e5e5e5 !important;
  font-weight: 500;
  color: #202124;
  height: 38px;
  line-height: 38px;
  padding-top: 0;
  padding-bottom: 0;
}
/* 详情禁用态保持正常文字颜色 */
/deep/ .el-input.is-disabled .el-input__inner,
/deep/ .el-textarea__inner[disabled] {
  color: #303133 !important;
  -webkit-text-fill-color: #303133 !important;
}
</style>
